<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box {
				box-shadow: rgba(17, 12, 46, 0.15) 0 48px 100px 0;
				cursor: pointer;
			}
			.mt-10 {
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div class="mt-10">
			<canvas class="box" width="500" height="500"></canvas>
		</div>
		<script>
			const canvas = document.querySelector(".box");
			const ctx = canvas.getContext("2d");
			const rows = 10;
			const cols = 10;
			const seatSize = 40;
			const seatGap = 11;
			const seatStatus = new Array(rows).fill(null).map(() => new Array(cols).fill(false));
			
			function drawSeats() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				
				for (let row = 0; row < rows; row++) {
					for (let col = 0; col < cols; col++) {
						const x = col * (seatSize + seatGap);
						const y = row * (seatSize + seatGap);
						ctx.fillStyle = seatStatus[row][col] ? "cornflowerblue" : "#ccc";
						ctx.fillRect(x, y, seatSize, seatSize);
					}
				}
			};
			drawSeats();
			canvas.addEventListener("click", (e) => {
				const { width, height, left, top } = canvas.getBoundingClientRect();
				const scaleX = canvas.width / width;
				const scaleY = canvas.height / height;
				const x = (e.clientX - left) * scaleX;
				const y = (e.clientY - top) * scaleX;
				const col = Math.floor(x / (seatSize + seatGap));
				const row = Math.floor(y / (seatSize + seatGap));
				seatStatus[row][col] = !seatStatus[row][col];
				drawSeats();
			});
		</script>
	</body>
</html>